<template>
  <div class="page-header">
    <div class="page-header__wrapper">
      <div class="page-header__logo-wrapper">
        <router-link tag="div" class="page-header__logo" :to="{name: 'home'}"></router-link>
      </div>
      <div class="page-header__nav">
        <router-link tag="div" :to="{name: 'register'}" class="page-header__tab">
          加入会员
        </router-link>
        <div class="page-header__tab">
          加入代理
        </div>
        <customer-service class="page-header__tab">
          在线服务
        </customer-service>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'page-header'
  };
</script>

<style lang="scss" scoped>

  @include b(page-header) {
    background-color: #cccccc;

    @include e(wrapper) {
      padding: 20px 0;
      display: flex;
      @include main-center();
      align-items: center;
    }

    @include e(logo-wrapper) {
      flex: 1 0 0;

    }
    @include e(logo) {
      cursor: pointer;
      height: 33px;
      background: center center no-repeat no-repeat transparent url(~@/assets/logo.png);
      background-size: cover;
      width: 281px;
    }

    @include e(nav) {
      display: flex;
    }
    @include e(tab) {
      padding: 0 20px;
      cursor:pointer;
    }
  }
</style>